// 做rem适配，使用 “浏览器宽度 / 80 + 'px'” 这个公式，得到html的font-size值
// 并且，当浏览器窗口改变大小的时候，重新计算这个值


// 计算font - size值
function setFont() {
  // 获取浏览器的宽度
  let htmlWidth = document.querySelector('html').clientWidth;
  // 找到临界点，判断最大宽度和最小宽度
  if (htmlWidth < 660) htmlWidth = 660;
  if (htmlWidth > 1920) htmlWidth = 1920;
  // 计算fontSize
  let fontSize = htmlWidth / 80 + 'px';
  // 把fontSize值，设置给html元素即可
  document.querySelector('html').style.fontSize = fontSize;
}

setFont(); // 刷新页面，马上计算font-size值

window.onresize = function () {
  setFont(); // 当浏览器窗口改变大小的时候，还要重新计算font-size值
}


// 点击添加数据
let data = []
let uname = []
let score = []
let wage = []
let ind = 1
function render() {
  $.each(data, function (index, item) {
    uname.unshift(item.uname)
    score.unshift(item.score)
    wage.unshift(item.wage)
  })
    ; (function () {
      $('table tbody').append(`<tr>
      <td>${uname[0]}</td>
      <td>${score[0]}</td>
      <td>${wage[0]}</td>
      </tr>`)
    })()
  //删除重复数据
  uname.splice(ind)
  score.splice(ind)
  wage.splice(ind)
  ind++
}
$('.left .btn').on('click', function () {
  let a = $(this).siblings('.uname').val()
  let b = $(this).siblings('.score').val()
  let c = $(this).siblings('.wage').val()
  $(this).siblings('.uname').val('')
  $(this).siblings('.score').val('')
  $(this).siblings('.wage').val('')




  data.push({
    uname: a, score: b, wage: c
  })
  render()
  line()
  bar()
})

// 折线图

function line() {
  let myChart1 = echarts.init($('.line')[0])
  let option = {
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#c86589'
    },
    {
      offset: 1,
      color: '#06a7ff'
    }
    ], false),
    title: {
      text: "评分",
      left: "center",
      bottom: "5%",
      textStyle: {
        color: "#fff",
        fontSize: 16
      }
    },
    grid: {
      top: '20%',
      left: '10%',
      right: '10%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: uname,
      axisLabel: {
        margin: 30,
        color: '#ffffff63'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        length: 25,
        lineStyle: {
          color: "#ffffff1f"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ffffff1f'
        }
      }
    },
    yAxis: [{
      type: 'value',
      position: 'right',
      axisLabel: {
        margin: 20,
        color: '#ffffff63'
      },

      axisTick: {
        show: true,
        length: 15,
        lineStyle: {
          color: "#ffffff1f",
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ffffff1f'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          width: 2
        }
      }
    }],
    series: [{
      name: '注册总量',
      type: 'line',
      smooth: true, //是否平滑曲线显示
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        normal: {
          color: "#fff", // 线条颜色
        },
      },
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#fff',
        }
      },
      itemStyle: {
        color: "red",
        borderColor: "#fff",
        borderWidth: 3
      },
      tooltip: {
        show: false
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#eb64fb'
          },
          {
            offset: 1,
            color: '#3fbbff0d'
          }
          ], false),
        }
      },
      data: score
    }]
  };


  myChart1.setOption(option)
}

// 柱状图
function bar() {
  let myChart2 = echarts.init($('.bar')[0])
  let option = {
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#c86589'
    },
    {
      offset: 1,
      color: '#06a7ff'
    }
    ], false),
    "title": {
      "text": "薪资",
      x: "center",
      y: "4%",
      textStyle: {
        color: '#fff',
        fontSize: '22'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16',

      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',
      right: '3%',
      left: '8%',
      bottom: '12%'
    },
    xAxis: [{
      type: 'category',
      data: uname,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 10,
        color: '#e2e9ff',
        textStyle: {
          fontSize: 14
        },
      },
    }],
    yAxis: [{
      name: '单位：元',
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255,255,255,1)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    }],
    series: [{
      type: 'bar',
      data: wage,
      barWidth: '20px',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0,244,255,1)' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'rgba(0,77,167,1)' // 100% 处的颜色
          }], false),
          barBorderRadius: [30, 30, 30, 30],
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
        }
      },
      label: {
        normal: {
          show: true,
          lineHeight: 30,
          width: 80,
          height: 30,
          backgroundColor: 'rgba(0,160,221,0.1)',
          borderRadius: 200,
          position: ['-8', '-60'],
          distance: 1,
          rich: {
            d: {
              color: '#3CDDCF',
            },
            a: {
              color: '#fff',
              align: 'center',
            },
            b: {
              width: 1,
              height: 30,
              borderWidth: 1,
              borderColor: '#234e6c',
              align: 'left'
            },
          }
        }
      }
    }]
  };
  myChart2.setOption(option)
}